<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
</style>
<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(14.540801,121.026592);
        var myOptions = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function codeAddress() {        
            <c:forEach items="${model.company}" var="company">
                <c:forEach items="${company.locations}" var="location">
                var photo = '<c:out value="${utils.photo_base_path}"/><c:out value="${company.primaryPhotoFileName}"/> ';
                var address = '<c:out value="${location.address}"/> ';
                var lat = '<c:out value="${location.lat}"/> ';
                var lng = '<c:out value="${location.lng}"/> ';
                var contact = '<c:out value="${location.contact}"/> ';
                var name  = '<c:out value="${company.name}"/> ';
                var type  = '<c:out value="${location.type}"/> ';
                var groupID  = '<c:out value="${company.groupID}"/> ';
                putMarker(photo, address, lat, lng, contact, name, type, groupID);
                </c:forEach>
            </c:forEach>
        }

    function putMarker(photo, location, lat, lng, contact, name, type, groupID){
        var address = location;

        try {
            if( (lat != undefined && lat.replace(/^\s+|\s+$/g, '') != '') &&
                (lng != undefined && lng.replace(/^\s+|\s+$/g, '') != '') ) {                
            
                var contentString = '<div class="MarkerPopUp" style="text-align:left; min-width:300px; min-height:110px; overflow:hidden; ">' +
                                        '<div class = "MarkerContext">' +
                                            '<table border="0" style="text-align:left; width:100%; height:100%; overflow:hidden; padding:0px;">' +
                                                '<tr>' +
                                                    '<td style="padding:5px; width:35px; "><img src="'+ photo + '" width="40px" height="40px" onerror="this.src=\'<c:out value="${utils.photo_base_path_system}company-profile-pic.jpg"/>\';" /></td>' +
                                                    '<td style="padding:5px;"><span style="font-weight: bold;font-size:19px;  width:100%; height:100%;"> <a href="companyGroup.htm?action=2&id='+groupID+'" style="font-size:13px;">' + name + '</a> </span></td>' +
                                                '</tr>' +
                                            '</table>' +
                                            '<table border="0" style="text-align:left; width:100%; height:100%; overflow:hidden; margin-left:10px;">' +
                                                '<tr>' +
                                                    '<td style="padding:0px; font-size:12px; border-bottom:0px; vertical-align:top;" colspan="2">' + location + '</td>' +
                                                '</tr>' +
                                                '<tr>' +
                                                    '<td style="padding:0px; font-size:12px; border-bottom:0px; vertical-align:top;" colspan="2">' + contact + '</td>' +
                                                '</tr>' +
                                            '</table>' +
                                        '</div>' +
                                    '</div>';

                var latlng = new google.maps.LatLng(lat, lng);
                var infowindow = new google.maps.InfoWindow({
                                                                content: contentString
                                                            });
                var image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
                var marker = new google.maps.Marker({
                                                    map: map,
                                                    position: latlng,
                                                    animation: google.maps.Animation.DROP,
                                                    title: name+": "+address,
                                                    icon: image
                                                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
                map.setCenter(latlng, 8);
            }
           
        } catch (e) {
            alert(e);
        }
        
    }

</script>